<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html{
				height: 100%;
				width: 100%;
				margin: 0;
			}
			*{box-sizing: border-box;}
			#container{
				height: 70%;
				width: 100%;
			}
			.btn{
				font-size: 1.5rem;
				width: 100%;
			}
			#p{
				font-size: 2rem;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="container">
			
		</div>
		<button onclick="btnClick()" class="btn">获取位置</button>
		<p id='p'></p>
	</body>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=ejAxjzIYdAcyuITvlYybrfQVyZgcANrB"></script>
	<script type="text/javascript">
		var p = document.getElementById("p")
		var map = new BMap.Map("container");          
		var point = new BMap.Point(113.752025,34.728945); 
		map.centerAndZoom(point,9);
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.GeolocationControl());
		map.enableScrollWheelZoom();
//		var marker = new BMap.Marker(point);        
//		map.addOverlay(marker);
//		p.innerHTML = 555
		
		
		
		
		
		
		function btnClick(){
			navigator.geolocation.getCurrentPosition(function(p){
				
				var a = p.coords
//				console.dir(p)
				var myPoint = new BMap.Point(a.longitude,a.latitude)
				alert("维度:"+a.latitude+"\n经度:"+a.longitude)
				var convertor = new BMap.Convertor();
				var pointArr = [];
				pointArr.push(myPoint)
				convertor.translate(pointArr,1,5,function(data){
//					console.dir(data)
					if(data.status==0){
						var str = JSON.stringify(data.points)
						console.log(str)
						document.writeln(str)
						p.innerText = str;
						alert(data.points[0])
						var bPoint = new BMap.Point(data.points[0].longitude,data.points[0].latitude)
						var marker = new BMap.Marker(bPoint);        
						map.addOverlay(marker);
						console.log(2222)
					}else{
						alert(data.status)
					}
				})
				
			},function(){
				console.log('位置获取失败')
			},{
				enableHighAccuracy: true,
				timeout: 10000,
				maximumAge: 1000
			})
		}
		
		function rem(){
			
			var html = document.getElementsByTagName('html');
			html[0].style.fontSize = "10px";
			var wH = document.documentElement.clientWidth;
			if(wH<320){
				html[0].style.fontSize = "10px";
			}else if(wH<1600){
				html[0].style.fontSize = wH/32+"px";
			}else{
				html[0].style.fontSize = "50px";
			}
			
		}
		rem()
		window.onresize = function(){
			rem()
			
		}
		
	</script>
</html>
